<template>
<div class="pager">

    <a href="" class="pager-item" @click.prevent="handlePage(1)" :class="{
        disabled:page==1
    }">首页</a>
    <a href="" class="pager-item" @click.prevent="handlePage(page-1)" :class="{
        disabled:page==1
    }">上一页</a>

    <a href="" class="pager-item" v-for="n in numbers" :key="n" :class="{
        active:page==n
    }" @click.prevent="handlePage(n)">{{n}}</a>

    <a href="" class="pager-item" @click.prevent="handlePage(page+1)" :class="{
        disabled:page==getPageNumber
    }">下一页</a>
    <a href="" class="pager-item" @click.prevent="handlePage(getPageNumber)" :class="{
        disabled:page==getPageNumber
    }">尾页</a>
    <span class="page-text">
        <i>{{page}}</i>
        /
        <i>{{getPageNumber}}</i>
    </span>
</div>
  
</template>

<script>
export default {
    props:{
        page:{
            type:Number,
            default:1
        },
        limit:{
            type:Number,
            default:10
        }
        ,
        total:{
            type:Number,
            default:10
        }
        ,
        panelNumber:{
            type:Number,
            default:10
        }
    },
    computed:{
        getPageNumber(){
            return Math.ceil(this.total/this.limit);
        },
        min(){
            var n =1;
            n =this.page-this.panelNumber/2;
            if(n<1){
                n=1
            }
            return  n
        },
        max(){
            var n =1;
            n= this.min+this.panelNumber-1;
            if(n>this.getPageNumber){
                n =this.getPageNumber;
            }
            return n;
        },
        numbers(){
            var n =[];
            for(let i =this.min;i<=this.max;i++){
                n.push(i);
            }
            return n;
        }
    },
    methods:{
        handlePage(newPage){
            if(newPage==0||newPage==this.getPageNumber+1){
                return;
            }
            this.$emit("changePage",newPage);
        }
    }

}
</script>

<style>
.pager {
  text-align: center;
  margin: 20px 0;
}

.pager .pager-item {
  display: inline-block;
  padding: 5px 7px;
  border: 1px solid #ccc;
  margin: 8px;
  cursor: pointer;
  color: rgb(96, 96, 224);
}

.pager .pager-item.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.pager .pager-item.active {
  color: #f40;
  border: none;
  cursor: auto;
}

</style>